<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹窗</title>
  <link rel="stylesheet" href="../style/reset.css">
  <link rel="stylesheet" href="../style/xiaolai.css">
  <style>
    .view{
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.5);
      background-image: url('../../components/IconSvg/pattern.svg');
      background-repeat: repeat;
      position: relative;
      font-family: 'Xiaolai SC';
    }

    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .slide-show-box{
      width: 100%;
      height: 100%;
      position: relative;
    }

    .slideshow-item{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all .3s linear;
    }

    .content{
      width: 60%;
      position: absolute;
      text-align: center;
      left: 0;
      top: 10%;
      right: 0;
      margin: 0 auto;
      font-size: 40px;
      color: #000;
      text-align: center;
      font-weight: 700;
      text-shadow: 
                -1px -1px 0 #fff,  
                 1px -1px 0 #fff,
                -1px  1px 0 #fff,
                 1px  1px 0 #fff;
      z-index: 9999;
    }


    .closure{
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 50px;
      border-radius: 50%;
      color: #333;
      cursor: pointer;
      opacity: 0.5;
      z-index: 9999;
    }

    .closure:hover{
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="view" title="ESC 退出">
    <!-- https://api.btstu.cn/sjbz/api.php?lx=fengjing -->
    <!-- <img class="random-img" src="" alt=""> -->
    <div class="content"></div>
    <icon-svg class="closure" name="closure"></icon-svg>
  </div>
</body>
<script type="module">
  import { getBaseImg } from '../utils/storage_imp.js'
  import { setInterval } from '../utils/utils.js'
  import IconSvg from '../../components/IconSvg/IconSvg.js'
  customElements.define('icon-svg', IconSvg)

  let data, index = 1;

  const closureEl = document.querySelector('.closure');
  const randomImgEl = document.querySelector('.random-img');
  const viewEl = document.querySelector('.view');

  const getAudio = async (sound) => {
    if(!sound)return;

    let audio = new Audio('https://music.163.com/song/media/outer/url?id=26479514.mp3');
    audio.addEventListener('canplay', () => {
      audio.play();
      audio.sound = 1;
      audio.loop = true;
    });

    audio.addEventListener('error', () => {
      let audio = new Audio('../assets/sound/apple.mp3');
      audio.onloadeddata = () => {
        audio.play();
        audio.sound = 1;
        audio.loop = true;
      };
    });

   
  }

  const hitokoto = async (remark) => {
    if(remark){
      contentEl.innerText = remark;
      return;
    }
   try{
    let res = await fetch('https://v1.hitokoto.cn');
    let data = await res.json();
    let text = data.hitokoto;
    contentEl.innerText = text;
   }catch(err){
    contentEl.innerText = '获取失败';
   }
    
  }

  const randomImgHandle = (randomImg) => {
    if(randomImg){
      const imgEl = document.createElement('img');
      imgEl.src = 'https://api.likepoems.com/img/bing/';
      viewEl.appendChild(imgEl);
    }
  }

  const delays = () => {
    let imgEls = document.querySelectorAll('.slideshow-item');
    index = index < imgEls.length ? index : 0;
    imgEls.forEach((item, i) => {
      if(index === i ){
        item.style.opacity = 1;
      }else{
        item.style.opacity = 0;
      }
    })
    index++;
  }

  const customizeImg = (urls) => {
    const slideshowEl = document.createElement('div');
    slideshowEl.classList.add('slide-show-box');
    const buffers = getBaseImg(urls);
    let html = '';
    buffers.forEach((item ,index) => {
      if(index === 0){
         html += `<img class="slideshow-item" src="data:${item.extension};base64,${item.base64Image}" alt="">`
      }else{
        html += `<img class="slideshow-item" style="opacity: 0;" src="data:${item.extension};base64,${item.base64Image}" alt="">`
      }
    })
    slideshowEl.innerHTML = html;
    viewEl.appendChild(slideshowEl);
    if(urls.length === 1)return
    setInterval(delays, 10000)
  }

  const render = (data) => {
    hitokoto(data.remark);
    if(data.urls.length){
      customizeImg(data.urls)
    }else{
      randomImgHandle(data.randomImg);
    }
    if(data.index === 0){
      getAudio(data.sound);
    }
  }

  if(window.ipcRenderer){
    window.ipcRenderer.on('init', (e,res) => {
      data = res;
      render(data);
    })
  }

  const contentEl = document.querySelector('.content');

  closureEl.onclick = () => {
    window.closeWin();
  }

  // 监听按键 ESC 
  document.addEventListener('keydown', (e) => {
    if(e.keyCode === 27){
      window.closeWin()
    }
  })
</script>
</html>